import { useEffect, useState } from 'react';
import { useUrlSearchParams } from 'use-url-search-params';
import an58 from '@mmstudio/an000058';
import Pagination from '../../../components/pagination';
import RightContainer from '../../../components/rightcontainer';
import Search from '../../../components/search';
import Title from './title';
import List from './list';
import api from '../../../atoms/api';
import { IData, Query as Q1, Result as R1 } from '../../api/project/content/query.api';
import Add from './add';

export default function Content({ initialquery, team }: {
	initialquery: Q1,
	team: ITbteam;
}) {
	const [data, setdata] = useState<R1>({
		count: 0,
		data: []
	});
	const [query, setquery] = useState<Omit<Q1, 'team_id'>>(initialquery);
	const [, setParams] = useUrlSearchParams({}, { page: Number });
	async function reload(q: Omit<Q1, 'team_id'>) {
		setquery(q);
		setParams(q);
		const data = await an58<R1, Q1>(api['/api/project/content/query'], 'get', {
			...q,
			team_id: team.team_id
		});
		setdata(data);
	}
	useEffect(() => {
		void reload(query);
	}, []);
	return <>
		<Title />
		<RightContainer	>
			<Search<IData>
				pagesize={Number(query.pagesize)}
				service={api['/api/project/content/query']}
				initq={query.q}
				onChange={(v) => {
					setdata(v);
				}} />
			{/* <Add team={team} /> */}
		</RightContainer>
		<List data={data.data} team={team} />
		<RightContainer>
			<Pagination
				current={Number(query.page || '1')}
				pageSize={Number(query.pagesize || '10')}
				showTitle
				total={data.count}
				onChange={(p, s) => {
					const q = {
						q: query.q,
						page: p.toString(),
						pagesize: s.toString()
					} as Q1;
					setquery(q);
					reload(q);
				}}
			/>
		</RightContainer>
	</>;
}
